<template>
  <div class="issue-page">
    <div class="tabs-title">
      <zan-tab
        :scroll="scroll"
        :list="tabList"
        :selected-id="selectedId" 
        @tabchange="handleTabChange"
      />
    </div>
      <div  v-if="resource_type==1">
        <msg-page  :list="msgList" @jumpDetail="jumpDetail"  @shoucang="shoucang"></msg-page>
      </div>
      <div  v-if="resource_type==2"> 
        <vid-page :prop="vidList"></vid-page> 
      </div>
      
    
  </div>
</template>

<script>
import * as api from '@/utils/api' 
import {formatTab}  from '@/utils/method'
import msgPage from '@/components/msg-page' 
import vidPage from '@/components/vid-page' 
export default {
  onLoad(){
    this.getTabsList();
  },
  components: {
    msgPage,
    vidPage
  }, 
  data () {
    return {
      tabList:[ ],
      selectedId: '0',
      scroll:false, //是否能滚动
      resource_type:null,
      offset:0,
      limit:10,
      count:0,  //总条数
 
      msgList:[],  //文章
      vidList:[], //视频
    }
  },
  methods:{
    //跳转详情
    jumpDetail(item){
      let url = `./../article-detail/main?artId=${item.article_id}&title=${item.title}`;
      wx.navigateTo({url}) 
    },
    //获得tabs列表
    getTabsList(){
      let vm = this;
      let body={
          model: "Tabs",
          condition: { 
            type: "3"
          }, 
      };
      api.commonSite(body).then(res=>{
          if(res.data.code==200){
              let arrList=[];
              if(res.data.code==200){ 
                res.data.data.count>4?vm.scroll=true:vm.scroll=false;
                res.data.data.count!=0?vm.tabListShow=true:vm.tabListShow=false;
                res.data.data.data.forEach((item,index)=>{ 
                  if(index==0)vm.selectedId=`${item.tab_id}/${item.resource_type}`;
                  let obj=item;
                  obj.id=`${item.tab_id}/${item.resource_type}`;
                  arrList.push(obj);
                }); 
                vm.resource_type=arrList[0].resource_type; 
                vm.getPrdList(formatTab('id',vm.selectedId));
              } 
              vm.tabList=arrList;
          }
      })
    },
    getPrdList(tabId,val){ 
      let vm =this;
      let body={
        model: '',
        condition:{
          tab_id: tabId, 
        },
        with:{
          "0":"tabs",
          "1":"records",
          "2":"collects",
          "3":"shares"
        },
        offset:vm.offset,
        limit:vm.limit
      };
      if(vm.resource_type==1){
        body.model='Articles';
      }else{
        body.model='Resources';
      } 
      api.commonSite(body).then(res=>{  
          if(res.data.code==200){ 
            vm.count=res.data.data.count; 
            if(vm.resource_type==1){
              if(val=='down'){  
                res.data.data.data.forEach((item,index)=>{
                  vm.msgList.push(item);  
                });
              }else{
                  vm.msgList=res.data.data.data; 
              }
              vm.msgList.forEach((item,index)=>{
                  item.create_time_txt=item.create_time.split(' ')[0];
              }); 
            }else{ 
              if(val=='down'){  
                res.data.data.data.forEach((item,index)=>{
                  vm.vidList.push(item);  
                });
              }else{
                  vm.vidList=res.data.data.data; 
              }
            }  
          }  
      });
    }, 
    handleTabChange(e) {
      this.offset=0;
      this.limit=10;
      this.count=0;  //总条数
      this.selectedId=e.mp.detail;
      this.resource_type=formatTab('type',e.mp.detail); 
      this.getPrdList(formatTab('id',e.mp.detail));  
    },
    //收藏
    shoucang(val,item){
        let vm = this;
        let body={
            model: "Records",
            data:{
                uid: wx.getStorageSync('u_id'),      
                resource_id: item.article_id,   
                type:1,        
                resource_type: item.tabs.type,   
                category:"1" 
            } 
        }; 
        if(val=='clear'){
            api.deleteData(body).then(res=>{
                if(res.data.code==200){
                    vm.getPrdList(formatTab('id',vm.selectedId));
                    wx.showToast({icon:'none', title: '取消成功' })
                }
            });
        }else{
            api.createSite(body).then(res=>{
                if(res.data.code==200){
                    vm.getPrdList(formatTab('id',vm.selectedId));
                    wx.showToast({icon:'none', title: '收藏成功' })
                }
            });
        }
        
    },
  },
  // 上拉加载，拉到底部触发
  onReachBottom() {
    this.offset+=this.limit;
    if(this.count==this.vidList.length)this.loadmore=true;
    if(this.count>this.vidList.length){
      this.getPrdList(formatTab('id',this.selectedId),'down');
    } 
  } 
}

</script>

<style scoped lang="scss">
.issue-page{
  padding-top:90rpx;
  .tabs-title{
    position:fixed;
    top:0;
    width:100%;
    height:90rpx;
    background:#fff; 
    z-index:20;
  }
}

</style>
